{% extends "WebMainSiteBundle:Web:layout.html.twig" %}
{% set title = course.title %}
{% block title %}
    {{ title }}
{% endblock %}
{% block myCss %}
    <link rel="stylesheet" href="{{ asset("bundles/webmainsite/web/css/lessons.css") }}" />
    <style>
        .lesson_stage{
            width: 100%;
            height: 600px;
            padding: 10px 0;
            background: rgba(0,0,0,.3);
            position: relative;
            overflow: hidden;
        }
        .lesson_stage .article{
            margin: 0 auto;
            width: 1000px;
            height: 100%;
            overflow-x: hidden;
            overflow-y: scroll;
            background: #FFF;
        }
        .lesson_stage .side_bar {
            position: absolute;
            width: 260px;
            height: 600px;
            padding: 0 0 20px 0;
            top:0;
            right: 0;
            /*background: rgba(0,0,0,.2);*/
            background: #222;
            z-index: 999999;
        }
        ::-webkit-scrollbar{width:10px;}
        ::-webkit-scrollbar-track{background-color:#222;}
        ::-webkit-scrollbar-thumb{background-color:#333;}
        ::-webkit-scrollbar-thumb:hover {background-color:#555}
        ::-webkit-scrollbar-thumb:active {background-color:#333}

        .lesson_stage .side_bar .list{
            width: 260px;
            height: 600px;
            overflow-y: scroll;
        }
        .lesson_stage .side_bar .list .title{
            height: 60px;
            font-size: 18px;
            line-height: 60px;
            text-indent: 15px;
            color:#AAA;
            background: rgba(0,0,0,.1);
        }
        .lesson_stage .side_bar .list .content1,.lesson_stage .side_bar .content2{
            height: 40px;
            font-size: 14px;
            line-height: 40px;
            color:#BBB;
        }
        .lesson_stage .side_bar .list .content1{
            text-indent: 10px;
        }
        .lesson_stage .side_bar .list .content2{
            text-indent: 15px;
        }
        .lesson_stage .side_bar .list .lesson{
            height: 30px;
            font-size: 12px;
            line-height: 30px;
            color:#BBB;
            text-indent: 20px;
         }
        .lesson_stage .side_bar .list a{
            text-decoration: none;
            color:#BBB;
        }
        .lesson_stage .side_bar .list  .lesson a:hover{
            color:#EEE;
        }
        .lesson_stage .side_bar .list .cur{
            background: #444;
        }
        .lesson_stage .side_bar .list .cur a{
            color: #EEE;
        }
        .lesson_stage .side_bar .btns{
            height: 300px;
            width: 60px;
            position: absolute;
            top:50px;
            left: -60px;
            z-index: 999999;
        }
        .lesson_stage .side_bar .btns .one_btn{
            width: 60px;
            height: 60px;
            background: #333;
            color: #CCC;
            line-height: 60px;
            text-align: center;
            font-size: 12px;
            cursor: pointer;
            margin-top: 1px;
        }

        .add_ons{
            margin-top: 20px;
            border-bottom: 1px solid #CCC;
        }
        .add_ons .one_add_on{
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
            float: left;
            overflow: visible;
            cursor: pointer;
        }
        .add_ons .one_add_on a{
            color: #333;
            text-decoration: none;
        }
        .add_ons .one_add_on .cur{
            display: block;
            height: 40px;
            color: #F97307;
            border-bottom: 3px solid #F97307;
        }
        .notes{
            margin: 50px 0;
        }
    </style>
{% endblock %}
{% block myJs %}
    <script src="{{ asset("bundles/webmainsite/web/script/lessons.js") }}"></script>
    <script>
        $(".btns").on("click","#chapter", function () {
            var sideBar = $(".side_bar");
            var pos = sideBar.css("right");
            if (pos != "0px") {
                sideBar.animate({"right":0},300);
            }else {
                sideBar.animate({"right":"-260px"},300);
            }
        });

        //comments
        $(".add_ons").on("click","#commentsShow", function () {
            $("#commentsList").show();
            $("#commentsShow").addClass("cur");
            $("#noteList").hide();
            $("#noteShow").removeClass("cur");
        });
        function commentsSubmit() {
            var p = $("#newComments").serialize();
            $.get(
                "{{ path("WebCommentsAdd") }}?" + p,
                function (data) {
                    getCommentsList(1);
                }
            );
        }
        function createCommentsReplyForm(ID,UID) {
            var nickName = $("#userName_" + UID).text();
            $("#input_" + ID).val("@" + nickName + ":");
            $("#ReplyBox_" + ID).show(100);
        }
        function commentsReplySubmit(ID) {
            var p = $("#CommentsReplyAdd_" + ID).serialize();
            $.get(
                "{{ path("WebCommentsReplyAdd") }}?" + p,
                function (data) {
                    getCommentsList(1);
                }
            );
        }
        function getCommentsList(Page) {
            $.get(
                "{{ path("WebCommentsList",{ uniqueId:course.uniqueId }) }}?id={{ courseLesson.id }}&pc=" + Page,
                function (data) {
                    if (data.s == 1) {
                        $("#commentsList .comments").html(data.d);
                    }else {
                        alert(data.i);
                    }
                }
            );
        }
        //note
        $(".add_ons").on("click","#noteShow", function () {
            $("#noteList").show();
            $("#noteShow").addClass("cur");
            $("#commentsList").hide();
            $("#commentsShow").removeClass("cur");
        });
        function noteSubmit() {
            var p = $("#newNote").serialize();
            $.get(
                "{{ path("WebNoteAdd") }}?" + p,
                function (data) {
                    getNoteList(1);
                }
            );
        }
        function createNoteReplyForm(ID,UID) {
            var nickName = $("#userName_" + UID).text();
            $("#input_" + ID).val("@" + nickName + ":");
            $("#ReplyBox_" + ID).show(100);
        }
        function noteReplySubmit(ID) {
            var p = $("#NoteReplyAdd_" + ID).serialize();
            $.get(
                "{{ path("WebNoteReplyAdd") }}?" + p,
                function (data) {
                    getNoteList(1);
                }
            );
        }
        function getNoteList(Page) {
            $.get(
                "{{ path("WebNoteList",{ uniqueId:course.uniqueId }) }}?id={{ courseLesson.id }}&pn=" + Page,
                function (data) {
                    if (data.s == 1) {
                        $("#noteList .notes").html(data.d);
                    }else {
                        alert(data.i);
                    }
                }
            );
        }

        $(".btns").on("click","#comments", function () {
            $("html,body").animate({scrollTop:700},500);
            $("#commentsShow").click();
        });
        $(".btns").on("click","#note", function () {
            $("html,body").animate({scrollTop:700},500);
            $("#noteShow").click();
        });



        setInterval(function (e) {
            var text = "+1积分学习奖励";
            bonusPoints(e ,window.scrollX + 100,window.scrollY + 300,text);
//        alert(e.pageX);
        },6132);


    </script>
{% endblock %}
{% block header_banner %}
    <div class="lesson_stage">
        <div class="side_bar">
            <div class="btns">
                <div class="one_btn" id="chapter"><i class="fa fa-list"></i> 章节</div>
                <div class="one_btn" id="comments"><i class="fa fa-comment"></i> 评论</div>
                <div class="one_btn" id="note"><i class="fa fa-pencil"></i> 笔记</div>
            </div>
            <div class="list">
                <div class="title">{{ course.title }}</div>
                {#{% for i in 1..10 %}#}
                    {% for row in courseLessonArrange %}
                        <div class="content{{ row.level + 1 }}"><i class="fa fa-tasks"></i> {{ row.title }}</div>
                        {% for lesson in row.lessons %}
                            <div class="lesson {% if app.request.get("id") == lesson.id %}cur{% endif %}">
                                <a href="{{ path("WebCourseLessons" , { uniqueId:course.uniqueId ,id:lesson.id}) }}">
                                    <i class="fa fa-book"></i> {{ lesson.title }}
                                </a>
                            </div>
                        {% endfor %}
                    {% endfor %}
                {#{% endfor %}#}
            </div>
        </div>
        <div class="article">
            {% if courseLesson.type == 0 %}
                {{ courseLesson.content | raw }}
            {% endif %}
            {% if courseLesson.type == 1 %}
                <video src="{{ courseLesson.content }}" controls="controls" style="width: 100%;height: 100%;background: #000;padding: 0;margin: 0;" autoplay="autoplay">
                    您的浏览器版本太低，不能支持 video 标签,请安装任意支持html5浏览器。<br>
                    可供您选择建议有:<a>傲游</a><a>火狐</a><a>谷歌浏览器</a><br>
                    如果您的浏览器可以切换到极速模式，您可以首先试一下！~~~~
                </video>
            {% endif %}
            {% if courseLesson.type == 2 %}
                {{ courseLesson.content | raw }}
            {% endif %}
        </div>
    </div>
{% endblock %}
{% block main %}
    <section class="content-light  blog">

        <div class="container">

            <div class="row">
                <div class="col-md-8">
                    <div class="add_ons">
                        <div class="one_add_on"><a class="cur" id="commentsShow">评论</a></div>
                        <div class="one_add_on"><a id="noteShow">笔记</a></div>
                        <div style="clear: both"></div>
                    </div>
                    <div id="commentsList">
                        <form class="form" role="form" id="newComments">
                            <input type="hidden" name="id" value="{{ courseLesson.id }}"/>
                            <div class="row" style="padding: 14px;">
                                <textarea name="content" class="form-control" rows="6" id="fieldInputMessage" placeholder="来一起说一说谈一谈"></textarea>
                            </div>
                            <p class="text-right">
                                <input onclick="commentsSubmit()" type="button" class="btn btn-green" value="发布评论" />
                            </p>
                        </form>
                        <article>
                            <section class="comments">
                                <ul class="media-list">
                                    {% for comment in courseComments %}
                                        <li class="media">
                                            <a class="pull-left"><img src="{{ asset(comment.headPic) }}" width="80" height="80" style="border-radius: 80px;" class="img-rounded" alt="" /></a>
                                            <div class="media-body">
                                                <div class="media-heading">
                                                    <strong id="userName_p{{ comment.id }}">{{ comment.nickName ? comment.nickName : comment.account }}</strong> - <time>{{ comment.time | date("Y/m/d H:i:s") }}</time>
                                                    <a href="javascript:createCommentsReplyForm('{{ comment.id }}','p{{ comment.id }}');" class="pull-right btn btn-dark"><i class="fa fa-reply"></i> 回复</a>
                                                </div>
                                                <p>[评]{{ comment.what }}</p>
                                                <div id="ReplyBox_{{ comment.id }}" style="padding: 10px;display: none">
                                                    <form class="form" role="form" id="CommentsReplyAdd_{{ comment.id }}">
                                                        <input type="hidden" name="id" value="{{ comment.id }}"/>
                                                        <div class="row" style="padding: 14px;">
                                                            <textarea id="input_{{ comment.id }}" name="content" class="form-control" rows="6" id="fieldInputMessage" placeholder="来一起说一说谈一谈"></textarea>
                                                        </div>
                                                        <p class="text-right">
                                                            <input onclick="commentsReplySubmit('{{ comment.id }}')" type="button" class="btn btn-green" value="回复" />
                                                        </p>
                                                    </form>
                                                </div>
                                                {% if comment.reply %}
                                                    {% for c in comment.reply %}
                                                        <div class="media">
                                                            <a class="pull-left"><img src="{{ asset(app.user.headPic) }}" width="80" height="80" style="border-radius: 80px;" class="img-rounded" alt="" /></a>
                                                            <div class="media-body">
                                                                <div class="media-heading">
                                                                    <strong id="userName_{{ c.id }}">{{ c.nickName ? c.nickName : c.account }}</strong> - <time>{{ c.time | date("Y/m/d H:i:s") }}</time>
                                                                    <a href="javascript:createCommentsReplyForm('{{ comment.id }}','{{ c.id }}');" class="pull-right btn btn-dark"><i class="fa fa-reply"></i> 回复</a>
                                                                </div>
                                                                <p>[评]{{ c.what }}</p>
                                                            </div>
                                                        </div>
                                                    {% endfor %}
                                                {% endif %}
                                            </div>
                                        </li>
                                    {% endfor %}
                                </ul>
                                <hr class="invisible" />
                                {{ page | raw }}
                            </section>
                        </article>
                    </div>
                    <div id="noteList" style="display:none;">
                        <form class="form" role="form" id="newNote">
                            <input type="hidden" name="id" value="{{ courseLesson.id }}"/>
                            <div class="row" style="padding: 14px;">
                                <textarea name="content" class="form-control" rows="6" id="fieldInputMessage" placeholder="笔记，点点滴滴的积累。"></textarea>
                            </div>
                            <p class="text-right">
                                <input onclick="noteSubmit()" type="button" class="btn btn-green" value="记笔记" />
                            </p>
                        </form>
                        <article>
                            <section class="notes">
                                <ul class="media-list">
                                    {% for note in courseNote %}
                                        <li class="media">
                                            <a class="pull-left"><img src="{{ asset(note.headPic) }}" width="80" height="80" style="border-radius: 80px;" class="img-rounded" alt="" /></a>
                                            <div class="media-body">
                                                <div class="media-heading">
                                                    <strong id="userName_p{{ note.id }}">{{ note.nickName ? note.nickName : note.account }}</strong> - <time>{{ note.time | date("Y/m/d H:i:s") }}</time>
                                                    <a href="javascript:createNoteReplyForm('{{ note.id }}','p{{ note.id }}');" class="pull-right btn btn-dark"><i class="fa fa-reply"></i> 讨论</a>
                                                </div>
                                                <p>[记]{{ note.what }}</p>
                                                <div id="ReplyBox_{{ note.id }}" style="padding: 10px;display: none">
                                                    <form class="form" role="form" id="NoteReplyAdd_{{ note.id }}">
                                                        <input type="hidden" name="id" value="{{ note.id }}"/>
                                                        <div class="row" style="padding: 14px;">
                                                            <textarea id="input_{{ note.id }}" name="content" class="form-control" rows="6" id="fieldInputMessage" placeholder="来一起说一说谈一谈"></textarea>
                                                        </div>
                                                        <p class="text-right">
                                                            <input onclick="noteReplySubmit('{{ note.id }}')" type="button" class="btn btn-green" value="讨论" />
                                                        </p>
                                                    </form>
                                                </div>
                                                {% if note.reply %}
                                                    {% for c in note.reply %}
                                                        <div class="media">
                                                            <a class="pull-left"><img src="{{ asset(app.user.headPic) }}" width="80" height="80" style="border-radius: 80px;" class="img-rounded" alt="" /></a>
                                                            <div class="media-body">
                                                                <div class="media-heading">
                                                                    <strong id="userName_{{ c.id }}">{{ c.nickName ? c.nickName : c.account }}</strong> - <time>{{ c.time | date("Y/m/d H:i:s") }}</time>
                                                                    <a href="javascript:createNoteReplyForm('{{ note.id }}','{{ c.id }}');" class="pull-right btn btn-dark"><i class="fa fa-reply"></i> 讨论</a>
                                                                </div>
                                                                <p>[记]{{ c.what }}</p>
                                                            </div>
                                                        </div>
                                                    {% endfor %}
                                                {% endif %}
                                            </div>
                                        </li>
                                    {% endfor %}
                                </ul>
                                <hr class="invisible" />
                                {{ pageNote | raw }}
                            </section>
                        </article>
                    </div>
                </div>
                <aside class="col-md-4" role="complementary">
                </aside>
            </div>
        </div>
    </section>
    {#<div id="ReplyForm" style="display: none;">#}
        {#<form class="form" role="form" id="WebCommentsReplyAdd_::ID::">#}
            {#<input type="hidden" name="id" value="::ID::"/>#}
            {#<div class="row" style="padding: 14px;">#}
                {#<textarea name="content" class="form-control" rows="6" id="fieldInputMessage" placeholder="来一起说一说谈一谈"></textarea>#}
            {#</div>#}
            {#<p class="text-right">#}
                {#<input onclick="commentsReplySubmit('::ID::')" type="button" class="btn btn-green" value="回复" />#}
            {#</p>#}
        {#</form>#}
    {#</div>#}
    {#<div id="ReplyFormNote" style="display: none;">#}
        {#<form class="form" role="form" id="WebNoteReplyAdd_::ID::">#}
            {#<input type="hidden" name="id" value="::ID::"/>#}
            {#<div class="row" style="padding: 14px;">#}
                {#<textarea name="content" class="form-control" rows="6" id="fieldInputMessage" placeholder="来一起说一说谈一谈"></textarea>#}
            {#</div>#}
            {#<p class="text-right">#}
                {#<input onclick="notesReplySubmit('::ID::')" type="button" class="btn btn-green" value="回复" />#}
            {#</p>#}
        {#</form>#}
    {#</div>#}
{% endblock %}